/**
 * Created by felix on 2017/3/5.
 */
import React from 'react';
import moment from 'moment';
import { connect } from 'dva';
// import _ from 'lodash';
import { Table } from 'antd';
import QueryBar from '../../../components/searchBar';
import common from '../common.less';

function Orders({ orders, dispatch }) {
    const { data, storeId, pagination } = orders;
    const columns = [
        {
            title: '创建时间',
            key: 'createTime',
            dataIndex: 'createTime',
            render: t => moment(t).format('YYYY-MM-DD HH:mm:ss')
        },
        {
            title: '关联店铺',
            key: 'storeName',
            dataIndex: 'storeName',
        },
        {
            title: '支付类型',
            key: 'paytype',
            dataIndex: 'paytype',
            render: (t) => {
                switch (t) {
                    case 'wxpay':
                        return '微信支付';
                    default:
                        return '线下代收';
                }
            }
        },
        {
            title: '交易类型',
            key: 'orderModel',
            dataIndex: 'orderModel',
            render: (t) => {
                switch (t) {
                    case '1':
                        return '充值';
                    case '2':
                        return '畅玩套餐';
                    default:
                        return '未知';
                }
            }
        },
        {
            title: '支付者',
            key: 'userName',
            dataIndex: 'userName',
        },
        {
            title: '金额(元)',
            key: 'rechargePrice',
            dataIndex: 'rechargePrice',
        },
    ];
    const reSearch = (query) => {
        dispatch({
            type: 'orders/reSearch',
            query,
        });
    };
    const onChange = (page, pageSize) => {
        dispatch({
            type: 'orders/load',
            payload: { page, pageSize },
        });
    };
    return (
        <div className={common.normalWrap}>
            <div className={common.search}>
                <QueryBar
                    config={[
                        'timeRange',
                        {
                            label: '玩家',
                            fdKey: 'userName',
                            placeholder: '请输入玩家昵称关键字',
                        },
                        'payType',
                        'orderType',
                    ]}
                    initFd={{ storeId }}
                    onSubmit={reSearch}
                />
            </div>
            <div className={common.table}>
                <Table
                    rowKey="id"
                    columns={columns}
                    dataSource={data}
                    pagination={{ ...pagination, onChange }}
                />
            </div>
        </div>
    );
}

function mapStateToProps({ orders }) {
    return { orders };
}

export default connect(mapStateToProps)(Orders);
